<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_事件操作-事件的监听方式</title>
  <!-- 
  在 jQuery 中，事件操作是与用户交互的重要部分。jQuery 提供了多种方法来监听和处理事件。
  一、事件监听的基本方法
   1.  `on()` 
  `on()`  方法用于为匹配的元素添加一个或多个事件处理程序。它是 jQuery 中最常用的事件监听方法。
  $(selector).on(event, childSelector, data, function)
  - event：要绑定的事件类型（如  `click` 、 `mouseover`  等）。
  - childSelector：可选参数，指定要绑定事件的子元素选择器。
  - data：可选参数，传递给事件处理程序的数据。
  - function：事件发生时要执行的回调函数。
  示例
  $('#myButton').on('click', function() {
      alert('按钮被点击了！');
  });
  在这个例子中，当 ID 为  `myButton`  的按钮被点击时，会弹出一个提示框。

   2.  `off()` 
  `off()`  方法用于移除之前通过  `on()`  方法绑定的事件处理程序。
  $(selector).off(event, childSelector, function)
  - event：要移除的事件类型。
  - childSelector：可选参数，指定要移除事件的子元素选择器。
  - function：要移除的事件处理程序。

  $('#myButton').off('click');
  在这个例子中，ID 为  `myButton`  的按钮的点击事件处理程序被移除。

   3.  `one()` 
  `one()`  方法用于为匹配的元素添加一个事件处理程序，该处理程序只会执行一次。
  $(selector).one(event, function)
  $('#myButton').one('click', function() {
      alert('按钮只会被点击一次！');
  });
  在这个例子中，点击按钮后，提示框只会显示一次，之后的点击不会触发事件。

   4. 事件代理
  事件代理是通过在父元素上绑定事件来处理子元素的事件。这在动态添加的元素上尤其有用。
  $('#parent').on('click', '.child', function() {
      alert('子元素被点击了！');
  });
  在这个例子中，点击 ID 为  `parent`  的元素内的任何具有  `child`  类的元素时，都会触发事件。

  二、总结
  -  `on()` ：用于绑定一个或多个事件处理程序，是最常用的事件监听方法。
  -  `off()` ：用于移除事件处理程序。
  -  `one()` ：用于绑定只会执行一次的事件处理程序。
  - 事件代理：通过在父元素上绑定事件来处理子元素的事件，适用于动态添加的元素。
  -->
</head>
<body>

  <ul id="list" class="panel">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <button class="cancel">取消事件的监听</button>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    $(function () {
      // 监听事件
      // 1. on(): 用于绑定一个或多个事件处理程序，是最常用的事件监听方法。
      $('#list').on('click', 'li', function () {
        console.log($(this).text());
      });

      // 2. off(): 用于移除事件处理程序。
      $('.cancel').on('click', function () {
        $('#list').off('click', 'li');
      });

      // 3. one(): 用于绑定只会执行一次的事件处理程序。
      $('.li-1').one('click', function () {
        alert('li-1 被点击了！');
      });

      // 4. 事件代理：通过在父元素上绑定事件来处理子元素的事件，适用于动态添加的元素。
      $('#list').on('click', '.child', function () {
        alert('子元素被点击了！');
      });

      $('#list').append('<li class="child">child</li>'); // 动态添加的元素也可以被事件代理监听到

      // 5. trigger(): 用于手动触发事件。
      $('.li-2').trigger('click');

      // 6. triggerHandler(): 用于手动触发事件，但不会触发默认行为，也不会冒泡。
      $('.li-3').triggerHandler('click');

      // 7. mouseenter/mouseleave: 用于处理鼠标进入和离开元素的事件。
      $('.li-4').on('mouseenter', function () {
        console.log('鼠标进入了 li-4');
      }).on('mouseleave', function () {
        console.log('鼠标离开了 li-4');
      });

      // 8. hover(): 用于处理鼠标进入和离开元素的事件，可以同时绑定两个事件处理程序。      
      $('.li-5').hover(function () {
        console.log('鼠标进入了 li-5');
      }, function () {
        console.log('鼠标离开了 li-5')
      })
    })
  </script>
  
</body>
</html>